<div class="divColorbox">
    <div class="divColorbox_Header">
        <span><i class="fa fa-star"></i><span>员工信息管理</span></span>
        <a class="Refresh"></a><a class="Close"></a>
    </div>
    <div class="divColorbox_Body row">
        <ul id="MenuTabs" class="nav nav-tabs">
            <li><a data-toggle="tab" href="#MenuTabs_Base">基本信息</a></li>
            <li><a data-toggle="tab" name="GroupRightCode" style="display: none" href="#MenuTabs_RightCode">权限设置</a></li>
            <!--<li><a data-toggle="tab" name="GroupRightCode" style="display: none" href="#MenuTabs_Store">管理门店</a></li>-->
        </ul>
        <div class="tab-content">
            <div id="MenuTabs_Base" class="tab-pane">
                <div class="alert alert-block alert-success" name="GroupMaster" style="display: none;">
                    <i class="fa fa-star"></i>
                    <strong>此帐户是超级管理员账号</strong> 可管理修改管理员
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon must">用户ID</span>
                            <input id="User_ID" type="text" class="form-control" />
                            <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <span class="help-inline"><strong class="txt-color-red">昵称：</strong><span id="AddGrant_NickName" style="color: #ff0000;">输入正确的用户ID,会出现昵称</span></span>
                        </div>
                    </div>
                </div>
                <div class="space-6"></div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon must">手机号</span>
                            <input id="Phone" type="text" class="form-control"/>
                            <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <span class="help-inline"><strong class="txt-color-red">注意：</strong>手机号是员工在系统的登录帐号，<strong>不允许重复，不可修改</strong> </span>
                        </div>
                    </div>
                </div>
                <div class="space-6"></div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon must">员工姓名</span>
                            <input id="RealName" type="text" class="form-control"/>
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        </div>
                    </div>
                    <!--<div class="col-sm-4">-->
                        <!--<div class="input-group">-->
                            <!--<span class="input-group-addon">职位</span>-->
                            <!--<input id="Position" type="text" class="form-control"/>-->
                            <!--<span class="input-group-addon"><i class="fa fa-black-tie"></i></span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon must">状态</span>
                            <select id="Status" class="form-control">
                                <option value="0">正常</option>
                                <option value="1">锁定</option>
                            </select>
                            <span class="input-group-addon"><i class="fa fa-heartbeat"></i></span>
                        </div>
                    </div>
                </div>
                <!--<div class="space-6"></div>-->
                <!--<div class="row">-->
                    <!--<div class="col-sm-4">-->
                        <!--<div class="input-group">-->
                            <!--<span class="input-group-addon must">超级管理</span>-->
                            <!--<select id="IsMaster" class="form-control">-->
                                <!--<option value="0">否</option>-->
                                <!--<option value="1">是</option>-->
                            <!--</select>-->
                            <!--<span class="input-group-addon"><i class="fa fa-pencil"></i></span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-8">-->
                        <!--<div class="input-group">-->
                            <!--<span class="input-group-addon">备注说明</span>-->
                            <!--<input id="Remark" type="text" class="form-control"/>-->
                            <!--<span class="input-group-addon"><i class="fa fa-pencil"></i></span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
            <div id="MenuTabs_RightCode" class="tab-pane">
                <ul id="MenuTabs_RightCode_Tree" name="GroupRightCode" style="display: none;"></ul>
            </div>
            <!--<div id="MenuTabs_Store" class="tab-pane">-->
                <!--<table id="dtpStoreList" name="GroupRightCode" style="display: none;" class="dataTable"></table>-->
            <!--</div>-->
        </div>
    </div>
    <div class="divColorbox_Footer">
        <div id="MenuTabs_RightCode_Button" name="GroupRightCode" MenuTabs="#MenuTabs_RightCode" class="pull-left"></div>
        <button type="button" id="btnUndo"></button>
        <button type="button" class="btn btn-primary" id="btnEnter"><i class="fa fa-check"></i> 确定/保存</button>
    </div>
</div>
<script src="<%- Virtual_Path.Static %>aceadmin/js/fuelux/fuelux.tree.min.js"></script>
<script src="<%- Virtual_Path.Static %>aceadmin/js/ace/elements.treeview.js"></script>
<script src="<%- Virtual_Path.Static %>jquery.plugin/dataTables/jquery.dataTables.min.js"></script>
<script src="<%- Virtual_Path.Static %>jquery.plugin/dataTables/jquery.dataTables.bootstrap.min.js"></script>
<script>
    $(function () {
        if (_PageData.flag !== 0) {
            $.KOC.Tips.Open('Error', _PageData.flag, {
                Timeout: 1000,
                onClose: function () {
                    parent.$.colorbox.close();
                }
            });
        }

        //////////////////////////////////////////////////////////
        //显示切换
        //////////////////////////////////////////////////////////
        if (!_PageData.IsMaster) {
            $('[name="GroupRightCode"]').show();
            $('[name="GroupMaster"]').remove();
        } else {
            $('[name="GroupRightCode"]').remove();
            $('[name="GroupMaster"]').show();
        }
        //////////////////////////////////////////////////////////
        //THISPAGE
        //////////////////////////////////////////////////////////
        var _ThisPage = {
            RightCode: {
                TreeElement: $('#MenuTabs_RightCode_Tree'),
                ButtonElement: $('#MenuTabs_RightCode_Button'),
                Button: [
                    {Type: 'Button', ID: 'Clear', Text: '清除选择'},
                    {Type: 'Button', ID: 'Reset', Text: '恢复默认'},
                    {Type: 'A', ID: 'All', Text: '全选'},
                    {Type: 'A', ID: 'All', Text: '运营管理'}
                ],
                fnTreeReload: function () {
                    $(_ThisPage.RightCode.TreeElement.find('li[name]')).each(function () {
                        var _HasClass = $(this).hasClass('tree-selected');
                        var _InArray = $.inArray($(this).attr('name'), _PageData.RightCode.Data) >= 0;
                        if (_HasClass != _InArray) {
                            _ThisPage.RightCode.TreeElement.tree('selectItem', $(this));
                        }
                    });
                    this.fnTreeGroup();
                },
                fnTreeGroup: function () {
                    var _RightCodeString = _PageData.RightCode.Data.join(',');
                    $(_ThisPage.RightCode.TreeElement.find('i[Group]')).each(function () {
                        if (_RightCodeString.indexOf($(this).attr('Group')) >= 0) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }
            }
        }
        //////////////////////////////////////////////////////////
        //验证用户ID
        //////////////////////////////////////////////////////////
        $("#User_ID").keyup(function(){
            var params = {};
            params.User_ID = $.trim($('#User_ID').val());//公会Id
            if(params.familyId !=''){
                $.KOC.Loading.Open();
                $.ajax({
                    url: '/ajax/base.user-id-info',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        User_ID:params.User_ID,
                    },
                    success: function (data) {
                        $.KOC.Loading.Close();
                        if (data.flag !== 0) {
                            $.KOC.Tips.Open("Error", data.msg , {Timeout: 2000});
                            $('#AddGrant_NickName').html('');
                            return;
                        }
                        $.KOC.Tips.Open("Success", '验证成功' , {Timeout:1000});
                        $('#AddGrant_NickName').empty().html(data.NickName);
                    }
                });
            }else{
                $("#User_ID").val('');
                $('#AddGrant_NickName').html('');
                return true;
            }
        })
        /////////////////////////////////////////////////////////
        //提交按钮事件
        /////////////////////////////////////////////////////////
        $('#btnEnter').click(function () {
            _PageData.User_ID = $('#User_ID').val();
            _PageData.Phone = $('#Phone').val();
            _PageData.RealName = $('#RealName').val();
            _PageData.Status = $('#Status').val();
            _PageData.IsMaster = $('#IsMaster').val();
            _PageData.RightCode = _PageData.RightCode.Data.join(',');

            if (!_PageData.Phone) {
                $.KOC.Tips.Open('Error', '请填写手机号码', {
                    Timeout: 1000,
                    onClose: function () {
                        $('#Phone').focus();
                    }
                });
                return;
            }
            if (!_PageData.RealName) {
                $.KOC.Tips.Open('Error', '请填写员工姓名', {
                    Timeout: 1000,
                    onClose: function () {
                        $('#RealName').focus();
                    }
                });
                return;
            }

            $.KOC.Loading.Open();

            $.ajax({
                url: "/ajax/user.admin-manage.enter-base",
                type: "post",
                dataType: "json",
                data: _PageData,
                success: function (result) {
                    $.KOC.Loading.Close();
                    if (result.flag !== 0) {
                        $.KOC.Tips.Open("Error", result.msg + "(" + result.flag + ")", {Timeout: 1000});
                        return;
                    }
                    $.KOC.Tips.Open("Success", "操作成功", {
                        Timeout: 1000,
                        onClose: function () {
                            parent.$.colorbox.close();
                            parent.window.location.href = "/system-manage/manager-manage/list";
                        }
                    });
                }
            });
        });
        /////////////////////////////////////////////////////////
        //绑定权限树
        /////////////////////////////////////////////////////////
        _ThisPage.RightCode.TreeElement.ace_tree({
            'open-icon': 'ace-icon tree-minus',
            'close-icon': 'ace-icon tree-plus',
            'selectable': true,
            'selected-icon': 'ace-icon fa fa-check',
            'unselected-icon': 'ace-icon fa fa-times',
            'multiSelect': true,
            'dataSource': function (options, callback) {
                var $data = {};
                if (!("text" in options) && !("type" in options)) {
                    $.each(_PageData.RightCode.TreeData, function (i, ThisValue) {
                        $data[i] = {
                            text: ThisValue.Text + '&nbsp;<i class="fa fa-check-square-o" Group="' + ThisValue.Code + '" style="display: ' + (ThisValue.Checked ? 'inline-block' : 'none') + ';"></i>&nbsp;<span class="light-grey">' + (ThisValue.Explain || '') + '</span>',
                            type: 'folder',
                            additionalParameters: {'item-selected': true},
                            children: {}
                        };
                        $.each(ThisValue.List, function (ii, ThisValue) {
                            $data[i]['children'][ii] = {
                                text: ThisValue.Text + '&nbsp;<i class="fa fa-check-square-o" Group="' + ThisValue.Code + '" style="display: ' + (ThisValue.Checked ? 'inline-block' : 'none') + ';"></i>&nbsp;<span class="light-grey">' + (ThisValue.Explain || '') + '</span>',
                                type: 'folder',
                                children: {}
                            };
                            $.each(ThisValue.List, function (iii, ThisValue) {
                                $data[i]['children'][ii]['children'][iii] = {
                                    text: ThisValue.Text + '&nbsp;<span class="light-grey">' + (ThisValue.Explain || '') + '</span>',
                                    value: ThisValue.Code,
                                    type: 'item',
                                    attr: {name: ThisValue.Code}
                                };
                            });
                        });
                    });
                    callback({data: $data});
                    return;
                }
                if (!("type" in options) || options.type != "folder") {
                    return;
                }
                if ("children" in options) {
                    $data = options.children;
                    if (!("additionalParameters" in options)) {
                        $.each($data, function () {
                            this.additionalParameters = {'item-selected': $.inArray(this.value, _PageData.RightCode.Data) >= 0};
                        });
                    }
                    callback({data: $data});
                    return;
                }
                callback({data: $data});
            }
        });
        /////////////////////////////////////////////////////////
        //权限选择事件
        /////////////////////////////////////////////////////////
        _ThisPage.RightCode.TreeElement.on('updated.fu.tree', function (event, data) {
            var _Target = $(event.target);
            var _RightCode = _Target.attr('name');
            if (!_RightCode) {
                return;
            }
            _.pull(_PageData.RightCode.Data, _RightCode);
            if (data.eventType == 'selected') {
                _PageData.RightCode.Data.push(_RightCode);
            }
            _ThisPage.RightCode.fnTreeGroup();
        });
        /////////////////////////////////////////////////////////
        //权限快捷按钮
        /////////////////////////////////////////////////////////
        $(_ThisPage.RightCode.Button).each(function () {
            _ThisPage.RightCode.ButtonElement.append('<' + this.Type + ' class="btn btn-' + (this.Type == 'A' ? 'light' : 'info') + '" ButtonType="' + this.ID + '">' + this.Text + '</' + this.Type + '> ');
        });
        _ThisPage.RightCode.ButtonElement.on('click', 'a', function () {
            if ($(this).hasClass('btn-light')) {
                $(this).removeClass('btn-light').addClass('btn-success');
            } else {
                $(this).removeClass('btn-success').addClass('btn-light');
            }
            _PageData.RightCode.Data = [];
            $(_ThisPage.RightCode.ButtonElement.find('a.btn-success')).each(function () {
                var _Button = _.find(_ThisPage.RightCode.Button, {ID: $(this).attr('ButtonType')})
                switch (_Button.ID) {
                    case 'All':
                        _PageData.RightCode.Data = _PageData.RightCode.All;
                        return false;
                    default:
                        _PageData.RightCode.Data = $.extend(_PageData.RightCode.Data, _Button.Code);
                        break;
                }
            });
            _ThisPage.RightCode.fnTreeReload();
        }).on('click', 'button', function () {
            switch ($(this).attr('ButtonType')) {
                case 'Clear':
                    _PageData.RightCode.Data = [];
                    break;
                case 'Reset':
                    _PageData.RightCode.Data = _PageData.RightCode.Default;
                    break;
                default:
                    return;
            }
            _ThisPage.RightCode.ButtonElement.find('a').removeClass('btn-success').addClass('btn-light');
            _ThisPage.RightCode.fnTreeReload();
        });

        //////////////////////////////////////////////////////////
        //数据绑定
        //////////////////////////////////////////////////////////
        if (_PageData.User_ID <= 0) {
            return;
        }
        $('#Phone').val(_PageData.Phone);
        $('#RealName').val(_PageData.RealName);
        $('#IsMaster').val(_PageData.IsMaster ? 1 : 0);
        $('#Status').val(_PageData.Status);

    });
</script>